import React, { Component, createRef } from 'react'
import { LockOutlined, UserOutlined, DingtalkOutlined } from '@ant-design/icons'
import { Button, Form, Input, message, Space } from 'antd'
import Captcha from '../../components/Captcha'
import req from '../../http/req'
import url from '../../config/url'
import { withRouter } from 'react-router-dom'
class PasswdForm extends Component {
  state = {
    key: ''
  }
  // 定义一个方法传给子组件
  saveKey = (key) => {
    // 子组件调用传参 修改state 实现子传父
    this.setState({ key })
  }
  // ref绑定组件 获取组件实例
  formRef = createRef()
  captchaRef=createRef()
  render() {
    return (
      <div>
        {/* 用户名 密码 验证码 */}
        <Form
          ref={this.formRef}
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true
          }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名'
              }
            ]}
          >
            <Input
              size="large"
              prefix={<UserOutlined />}
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码'
              }
            ]}
          >
            <Input
              size="large"
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: '请输入验证码'
              }
            ]}
          >
            <Space>
              <Input
                size="large"
                prefix={<DingtalkOutlined />}
                type="text"
                placeholder="验证码"
              />
              <Captcha ref={this.captchaRef} saveKey={this.saveKey} h={40}></Captcha>
            </Space>
          </Form.Item>
          <Form.Item>
            {/* block 调整为父元素的宽度 */}
            <Button
              size="large"
              block
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
  // 收集表单数据并提交
  onFinish = (values) => {
    // 将验证码的key添加到提交数据中
    values['key'] = this.state.key
    // console.log('Received values of form: ', values)
    // 发送请求,登录校验
    req.post(url.PasswdLogin, values).then((res) => {
      console.log(res)
      // 登录成功
      if (res.data.errNo === 0) {
        message.success('登录成功', 2, () => {
          // 跳转到管理平台首页面
          // console.log(this.props)
          this.props.history.push('/dashboard')
        })
      } else {
        // 登录失败
        message.error(res.data.errText, 2, () => {
          //清空所有的表单元素内容
          // this.formRef.current.setFieldsValue({
          //   username:'',
          //   password:''
          // })
          this.formRef.current.resetFields()
          // 重载验证码图片
          this.captchaRef.current.load()
          // window.location.reload()
        })
      }
    })
  }
}
export default withRouter(PasswdForm)
